<!DOCTYPE html>
<html>
<head>
    <title>Electron Path in Magnetic Field</title>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="520" style="border:1px solid #ccc;"></canvas>

    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Define parameters ---
        const cx = 250;
        const cy = 260; // Center vertically to leave space for caption and labels
        const pathRadius = 120;
        const fieldRadius = 180;
        const labelFont = '16px Arial';
        const captionFont = '16px Arial';
        const sFont = 'bold 16px Arial';

        // --- Colors and Styles ---
        const fieldColor = '#D3D3D3';
        const lineColor = 'black';

        // --- Helper function for drawing arrowheads ---
        // Draws an arrowhead at (x, y) pointing in the direction of 'angle'.
        function drawArrowhead(ctx, x, y, angle, size) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(angle);
            ctx.beginPath();
            // The arrowhead points along the positive x-axis of the rotated context
            // We draw the lines backwards from the tip at (0,0)
            ctx.moveTo(-size, -size / 2.5);
            ctx.lineTo(0, 0);
            ctx.lineTo(-size, size / 2.5);
            ctx.stroke();
            ctx.restore();
        }

        // --- Main Drawing Logic ---

        // 1. Draw region of uniform magnetic field (grey circle)
        ctx.beginPath();
        ctx.arc(cx, cy, fieldRadius, 0, 2 * Math.PI);
        ctx.fillStyle = fieldColor;
        ctx.fill();

        // 2. Draw path of electrons (dashed circle)
        ctx.beginPath();
        ctx.arc(cx, cy, pathRadius, 0, 2 * Math.PI);
        ctx.setLineDash([6, 4]);
        ctx.strokeStyle = lineColor;
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.setLineDash([]); // Reset line dash for subsequent drawings

        // 3. Draw arrows on the path to indicate counter-clockwise motion
        const arrowSize = 10;
        // Angles for placing the arrows on the circle (45, 135, 225, 315 degrees)
        const arrowPlacementAngles = [Math.PI / 4, 3 * Math.PI / 4, 5 * Math.PI / 4, 7 * Math.PI / 4];
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = lineColor;
        arrowPlacementAngles.forEach(theta => {
            const x = cx + pathRadius * Math.cos(theta);
            const y = cy + pathRadius * Math.sin(theta);
            // The tangent angle for counter-clockwise motion at angle theta is theta + 90 degrees
            const tangentAngle = theta + Math.PI / 2;
            drawArrowhead(ctx, x, y, tangentAngle, arrowSize);
        });

        // 4. Draw point S and its label
        const s_angle = Math.PI; // 180 degrees (left side)
        const s_x = cx + pathRadius * Math.cos(s_angle);
        const s_y = cy + pathRadius * Math.sin(s_angle);
        
        ctx.beginPath();
        ctx.arc(s_x, s_y, 4, 0, 2 * Math.PI);
        ctx.fillStyle = lineColor;
        ctx.fill();

        ctx.font = sFont;
        ctx.fillStyle = lineColor;
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('S', s_x - 8, s_y);

        // 5. Draw labels and pointers
        ctx.lineWidth = 1;
        ctx.strokeStyle = lineColor;
        ctx.font = labelFont;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'alphabetic'; // Reset to default

        // Label for magnetic field region
        // Pointer starts from inside the grey area in the top-right quadrant
        const label1_start_angle = -Math.PI / 6; // 330 degrees
        const label1_start_radius = pathRadius + 40;
        const label1_startX = cx + label1_start_radius * Math.cos(label1_start_angle);
        const label1_startY = cy + label1_start_radius * Math.sin(label1_start_angle);
        const label1_endX = 410;
        const label1_endY = 140;
        ctx.beginPath();
        ctx.moveTo(label1_startX, label1_startY);
        ctx.lineTo(label1_endX, label1_endY);
        ctx.stroke();

        // Text for the magnetic field label
        const text1_x = label1_endX + 5;
        const text1_y_base = label1_endY;
        ctx.fillText('region of uniform', text1_x, text1_y_base - 18);
        ctx.fillText('magnetic field,', text1_x, text1_y_base);
        ctx.fillText('flux density B', text1_x, text1_y_base + 18);

        // Label for the electron path
        // Pointer starts from the dashed path in the bottom-right quadrant
        const label2_start_angle = Math.PI / 3.5; // approx 51 degrees
        const label2_startX = cx + pathRadius * Math.cos(label2_start_angle);
        const label2_startY = cy + pathRadius * Math.sin(label2_start_angle);
        const label2_endX = 400;
        const label2_endY = 400;
        ctx.beginPath();
        ctx.moveTo(label2_startX, label2_startY);
        ctx.lineTo(label2_endX, label2_endY);
        ctx.stroke();

        // Text for the path label
        const text2_x = label2_endX + 5;
        const text2_y_base = label2_endY;
        ctx.fillText('path of electrons,', text2_x, text2_y_base - 9);
        ctx.fillText('radius r', text2_x, text2_y_base + 9);

        // 6. Draw the figure caption
        ctx.font = captionFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillStyle = lineColor;
        ctx.fillText('Fig. 8.1', canvas.width / 2, canvas.height - 10);

    </script>
</body>
</html>